<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>SiGlog</title>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta charset="utf-8" />

	<style>
html,body,#map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
}
</style>
	<script
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB425wKAGlAQ323sMqenZ5Pc7ErmlcTspM&amp;sensor=false&amp;libraries=drawing"
		type="text/javascript" />
	<script src="js/map.js" type="text/javascript" />
</h:head>

<h:body onload="initialize()">
	<p:layout fullPage="true">
		<p:layoutUnit header="Demarcação de área de bairro" position="north"
			size="100" collapsible="true" closable="false"
			style="text-align:center;">
			<h:form id="form">
				<p:growl id="growl" life="3000" />
				<p:toolbar>
					<p:toolbarGroup align="left">
						<h:outputText value="Geocoder: " />
						<input id="address" type="text" size="25" />
						<input value="Buscar" type="button" onclick="codeAddress()" />
						<p:separator />
						<h:outputText value="Código do bairro: " />
						<p:inputText size="5" value="#{bairroBean.codigo}">
							<p:ajax event="keyup" update=":form:growl"
								listener="#{bairroBean.buscar}" />
						</p:inputText>
						<h:inputHidden id="urlMap" value="#{bairroBean.urlMap}" />
						<h:commandButton value="Salvar" onclick="getUrlMap()"
							actionListener="#{bairroBean.demarcar()}" />
					</p:toolbarGroup>
					<p:toolbarGroup align="right">
						<p:commandButton value="Voltar" type="button"
							icon="ui-icon-arrowreturnthick-1-w"
							onclick="document.location='principal.jsf'" />
						<p:commandButton value="Sair" icon="ui-icon-extlink"
							onclick="document.location='#{request.contextPath}/j_spring_security_logout'" />
					</p:toolbarGroup>
				</p:toolbar>
			</h:form>
		</p:layoutUnit>

		<p:layoutUnit position="center">
			<div id="map-canvas"></div>
		</p:layoutUnit>
	</p:layout>
</h:body>
</html>